<template>
      <div class="container">
     <div class="head">
       <span class="san">学科名称</span>
      <Input v-model="value" placeholder="请输入..." style="width: 200px" @on-enter="serchData"></Input>
      <Button type="dashed" class="btn" @click="delValur">清除</Button>
      <Button type="primary" class="btn" @click="serchData">搜索</Button>
      <Button class="btn" style="float: right;backgroundColor: #67c23a;color: white;" icon="ios-create" @click="addSubjects">新增</Button>
     </div>
  <p class="iconP">
      <Icon type="ios-alert" style="margin-right:5px"/>
      <span>数据一共{{dataObj.counts}}条</span>
  </p>
  <Table size="large" :data="dataObj.items" :columns="columns">
     <template slot="action" slot-scope="{row}">
            <Button type="text" size="small" style="margin-right: 5px;color:#909eff" ghost @click="toDirectorys(row)">学科分类</Button>
            <Button type="text" size="small" style="margin-right: 5px;color:#909eff" ghost @click="toTags(row)">学科标签</Button>
            <Button type="text" size="small" style="margin-right: 5px;color:#909eff" ghost @click="updataSubject(row)">修改</Button>
            <Button type="text" size="small" style="margin-right: 5px;color:#909eff"  ghost @click="delSubject(row.id)">删除</Button>
    </template>
  </Table>
  <Page
  :total="dataObj.counts"
  show-elevator
  show-sizer
  class-name="right"
  @on-page-size-change="changePage"
  @on-change="change"
  >
  </Page>

<subjectsAdd
@getList="getList"
:showAdd.sync="showAdd"
ref="sub"
></subjectsAdd>
  </div>
</template>

<script>
import
subjectsAdd from '../components/subjects-add.vue'
import { list, remove, detail } from '@/api/hmmm/subjects.js'
import { filterDate } from '@/filters'
export default {
  components: {
    subjectsAdd
  },
  data () {
    return {
      value: '',
      columns: [
        { title: '序号', type: 'index', fixed: 'left' },
        { title: '学科名称', key: 'subjectName', fixed: 'left', width: '200px' },
        { title: '创建者', key: 'username', fixed: 'left' },
        { title: '创建日期', key: 'addDate', fixed: 'left', width: '300px' },
        { title: '前台是否显示', key: 'isFrontDisplay', fixed: 'left' },
        { title: '二级目录', key: 'twoLevelDirectory', fixed: 'left' },
        { title: '标签', key: 'tags', fixed: 'left' },
        { title: '题目数量', key: 'totals', fixed: 'left' },
        { title: '操作', slot: 'action', width: '300px', fixed: 'left' }
      ],
      dataObj: {},
      page: {
        page: 1,
        pagesize: 10
      },
      showAdd: false,
      tagName: ''
    }
  },
  methods: {
    delValur () {
      this.value = ''
    },
    async getList () {
      const res = await list(this.page)
      this.dataObj = res.data
      this.dataObj.items.forEach(item => {
        item.isFrontDisplay = item.isFrontDisplay === 0 ? '是' : '否'
        item.addDate = filterDate(item.addDate)
      })
    },
    change (newpage) {
      this.page.page = newpage
      this.getList()
    },
    changePage (page) {
      this.page.pagesize = page
      this.getList()
    },
    serchData () {
      if (this.value) {
        const newArr = []
        this.dataObj.items.map(item => {
          // eslint-disable-next-line no-unused-expressions
          if (item.subjectName === this.value) {
            newArr.push(item)
          }
          this.dataObj.items = newArr
        })
      }
    },
    addSubjects () {
      this.showAdd = true
    },
    async delSubject (id) {
      await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      this.dataObj.id = id
      await remove(this.dataObj)
      this.$message.success('删除成功')
      this.getList()
    },
    async updataSubject (row) {
      this.showAdd = true
      const res = await detail(row)
      this.$refs.sub.getRow(res)
    },
    toDirectorys (row) {
      const id = row.id
      const subjectName = row.subjectName
      this.$router.push({ name: 'subjects-directorys', params: { id: id, subjectName: subjectName } })
    },
    toTags (row) {
      const id = row.id
      const subjectName = row.subjectName
      this.$router.push({ name: 'subjects-tags', params: { id: id, subjectName: subjectName } })
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style scope>
    .san {
    line-height: 30px;
    margin-right: 15px;
    font-weight: 600;
    }
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .container {
      background-color: #fff;
    }
    .head {
      padding: 20px 30px;
    }
    .btn{
        margin-left: 15px;
    }
    .iconP {
      height: 40px;
      margin: 10px 20px;
      background-color: #f4f4f5;
      line-height: 40px;
      font-size: 16px;
    }
     .right {
      float: right;
    }

</style>

<style scoped lang='less'></style>
